<template>
	<view class="login-container">
		<view class="content-wrapper">
			<!-- Logo区域 -->
			<view class="logo-container">
				<view class="logo-wrapper">
					<image class="logo" :src="currentLogo" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 标题 -->
			<view class="title-container">
				<text class="logo-title">登录您的账号</text>
			</view>
			
			<!-- 登录表单区域 -->
			<view class="form-container">
				<!-- 输入框区域 -->
				<view class="input-group">
					<input 
						class="input-item"
						type="text"
						v-model="username"
						placeholder="Email"
					/>
					<view class="input-wrapper">
						<input
							:type="showPassword ? 'text' : 'password'"
							v-model="password"
							placeholder="请输入密码"
							class="input-box"
						/>
						<image 
							:src="showPassword ? '/static/images/passwordimg.svg' : '/static/images/login_password_hide.svg'"
							class="password-icon"
							mode="aspectFit"
							@tap="togglePassword"
						></image>
					</view>
				</view>
				
				<!-- 忘记密码链接 -->
				<!-- <view class="forgot-password">
					<text class="link-text" @tap="forgotPassword">忘记密码?</text>
				</view> -->
			</view>
		</view>
		
		<!-- 登录按钮容器 -->
		<view class="button-container">
			<button class="sign-in-btn" @tap="handleLogin">登录</button>
		</view>
	</view>
</template>

<script>
import request from '../../utils/request.js'
import { parseJwt } from '../../utils/jwt.js'

	export default {
		data() {
			return {
				username: 'tenant@thingsboard.org',
				password: 'tenant',
				showPassword: false,
				currentLogo: '/static/logo/logo.svg'
			}
		},
		methods: {
		togglePassword() {
			this.showPassword = !this.showPassword
		},
		async handleLogin() {
			try {
				// 表单验证
				if (!this.username || !this.password) {
					uni.showToast({
						title: '请输入账号和密码',
						icon: 'none'
					})
					return
				}
				
				// 显示加载提示
				uni.showLoading({
					title: '登录中...'
				})
				
				// 发送登录请求
				const result = await request.post('/api/auth/login', {
					username: this.username,
					password: this.password
				})
				
				// 处理登录成功
				if (result.token && result.refreshToken) {
					// 解析token
					const tokenInfo = parseJwt(result.token);
					//console.log('Token info:', tokenInfo);
					
					// 可以从payload中获取用户信息
					const { sub: userId, scopes, firstName, lastName, enabled, ...other } = tokenInfo.payload;
					
					// 存储token和用户信息
					uni.setStorageSync('token', result.token);
					uni.setStorageSync('refreshToken', result.refreshToken);
					uni.setStorageSync('userInfo', {
						userId,
						scopes,
						firstName,
						lastName,
						enabled,
						...other
					});
					
					// 显示成功提示
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})
					
					// 跳转到首页并传递必要参数
					uni.reLaunch({
						url: '/pages/home/home' // 跳转到首页，确保路径正确
					});
				} else {
					// 处理响应中没有token的情况
					uni.showToast({
						title: '登录失败，请检查账号或密码',
						icon: 'none'
					})
				}
			} catch (error) {
				// 显示错误信息
				uni.showToast({
					title: error.message || '登录失败',
					icon: 'none'
				})
			} finally {
				// 确保在任何情况下都会关闭加载提示
				uni.hideLoading()
			}
		}
		}
	}
</script>

<style>
.login-container {
	height: 100vh; /* 使用固定高度替代min-height */
	background-color: #ffffff;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: fixed; /* 添加固定定位 */
	width: 100%;
	left: 0;
	top: 0;
}

/* 内容包装器处理 */
.content-wrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-y: auto; /* 如果内容过多，允许这部分滚动 */
	-webkit-overflow-scrolling: touch; /* 提升移动端滚动体验 */
}

.logo-container {
	display: flex;
	justify-content: center;
	margin-top: 200rpx;
}

.logo-wrapper {
	width: 180rpx;
	height: 180rpx;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0;
}

.logo {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.title-container {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 100rpx 0 180rpx 0;
	padding: 0 40rpx;
	box-sizing: border-box;
}

.logo-title {
	font-size: 48rpx;
	font-weight: 600;
	color: #333;
}

.form-container {
	width: 100%;
	padding: 0 80rpx;
	box-sizing: border-box;
	margin-top: 40rpx; /* 适当减小边距 */
}

.input-group {
	width: 100%;
	margin-bottom: 20rpx;
}

.input-item {
	width: 100%;
	height: 88rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	margin-bottom: 40rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.input-wrapper {
	position: relative;
}

.input-box {
	width: 100%;
	height: 88rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 8rpx;
	margin-bottom: 40rpx;
	padding: 0 30rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.password-icon {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
}

.forgot-password {
	text-align: right;
	margin: 40rpx 0;
}

.link-text {
	color: #2196f3;
	font-size: 26rpx;
}

/* 确保按钮容器固定在底部 */
.button-container {
	width: 100%;
	padding: 0 80rpx;
	box-sizing: border-box;
	margin-bottom: 160rpx;
	flex-shrink: 0; /* 防止按钮容器被压缩 */
}

.sign-in-btn {
	width: 100%;
	height: 88rpx;
	background-color: #305680;
	color: white;
	border: none;
	border-radius: 44rpx; /* 增加圆角，使按钮更圆润 */
	font-size: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 16rpx rgba(48, 86, 128, 0.2); /* 添加阴影效果 */
}

.sign-in-btn:active {
	opacity: 0.9;
	transform: translateY(2rpx); /* 添加点击效果 */
}

.input-item:focus {
	border-color: #305680;
	box-shadow: 0 0 0 2rpx rgba(48, 86, 128, 0.1);
}
</style>
